<template>
  <router-link class="goodItem" to="home/detail">
    <img :src="goodItem.primaryPicUrl" alt="" />
    <div class="goodTitle">
      <span>{{ goodItem.name }}</span>
    </div>
    <div class="goodDescription">
      <p>
        到手￥<span class="one">{{ goodItem.retailPrice }}</span>
        <span class="two" v-show="!!goodItem.counterPrice">￥{{ goodItem.counterPrice }}</span>
      </p>
    </div>
  </router-link>
</template>

<script lang="ts" setup>
import { IdirectlyList } from '@/types/search'

defineProps<{
  goodItem: IdirectlyList
}>()
</script>

<script lang="ts">
export default {
  name: 'VGoodsCard'
}
</script>

<style lang="scss" scoped>
.goodItem {
  box-sizing: border-box;
  width: 187.5px;
  height: 282.5px;
  padding: 0 5.6px 29.12px 11.2px;
  img {
    width: 172.5px;
    height: 172.5px;
  }
  .goodTitle {
    width: 172.5px;
    padding: 6px 0 0;
    font-size: 14px;
  }
  .goodDescription {
    width: 172.5px;
    height: 30px;
    color: red;
    margin-top: 3px;
    p {
      font-size: 12px;
      margin: 0;
      .one {
        font-size: 20px;
      }
      .two {
        color: gray;
        text-decoration: line-through;
      }
    }
  }
  .preferential {
    color: white;
    background-color: red;
    border-radius: 10px;
    font-size: 12px;
    padding: 2.24px 6.72px;
    font-weight: 900;
  }
}
</style>
